<template>
  <div class="menu">
    <van-nav-bar title="菜单" left-text="返回" @click-left="back" left-arrow />
    <div class="banner">
      <img class="img-auto" src="../assets/images/banner.png" alt="" />
    </div>
    <div class="treeSelect">
      <van-sidebar v-model="activeKey">
        <div style="position: relative" v-for="item in classify" :key="item.id">
          <!-- <div class="icon"></div> -->
          <van-sidebar-item
            :title="item.typeDesc"
            @click="getProduct(item.key, item.type)"
          />
        </div>
      </van-sidebar>
      <div class="menu-list">
        <div class="title"></div>
        <ul>
          <li
            v-for="item in productList"
            :key="item.id"
            @click="goProDetail(item.pid)"
          >
            <div class="pro-img">
              <img class="img-auto" :src="item.smallImg" alt="" />
            </div>
            <div class="pro-text">
              <div class="pro-names">
                <div class="pro-name">{{ item.name }}</div>
                <div class="pro-rule">{{ item.rule }}</div>
              </div>
              <div class="emname">{{ item.enname }}</div>
              <div class="count-box">
                <div class="pro-price">&yen; {{ item.price }}</div>
                <div class="pro-count"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/menu.less";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Menu",
  data() {
    return {
      activeKey: 0,
      classify: [],
      productList: [],
      detailsData: {},
    };
  },

  computed: {
    ...mapState(["shopCarCount"]),
  },

  created() {
    this.getProductType();
    this.getProduct("isHot", 1);
  },

  methods: {
    ...mapMutations(["changeShopCarCount"]),

    back() {
      this.$router.back();
    },

    goProDetail(pid) {
      this.$router.push({ name: "Details", params: { pid } });
    },

    // 获取商品类型
    getProductType() {
      this.axios({
        method: "GET",
        url: this.baseURL + "/type",
        params: {
          appkey: this.appkey,
        },
      })
        .then((response) => {
          this.$toast.clear();
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code == 400) {
            response.data.result.unshift({
              type: "1",
              typeDesc: "推荐",
            });
            response.data.result.forEach((v) => {
              if (v.type == 1) {
                v.key = "isHot";
              } else {
                v.key = "type";
              }
            });
            this.classify = response.data.result;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },

    // 查看商品
    getProduct(key, value) {
      this.axios({
        method: "GET",
        url: this.baseURL + "/typeProducts",
        params: {
          appkey: this.appkey,
          key,
          value,
        },
      })
        .then((response) => {
          this.$toast.clear();
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code == 500) {
            this.productList = response.data.result;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },
  },
};
</script>
